<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="__MOBILE__/jscss/index.css">
    <link rel="stylesheet" href="__MOBILE__/jscss/css.css">
    <script type="text/javascript" src="__MOBILE__/jscss/w_rem.js" ></script>
    <script src="__MOBILE__/jscss/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>
<body style="background: #f8f8f8;">

        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top1_title_left clear">
                    <div class="index_top1_title_left1">01</div>
                    <div class="index_top1_title_left2">讲座日期</div>
                </div>
                <div class="index_top1_title_right clear">
                    <div class="index_top1_title_right1"><img src="__MOBILE__/img/a1.png" ><input type="date" class="time1"></div>
                    <div class="index_top1_title_right2"></div>
                </div>
            </div>
        </div>
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top2_title_left clear"><div class="index_top1_title_left1">02</div><div class="index_top1_title_left2">填写人姓名</div></div>
            </div>
            <div class="index_top2_input"><input name="name"  onkeyup="set_value(this)" type="text" placeholder="请输入填写人姓名"></div>
        </div>
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top2_title_left clear"><div class="index_top1_title_left1">03</div><div class="index_top1_title_left2">填写人电话号码</div></div>
            </div>
            <div class="index_top2_input"><input name="mobile" onkeyup="set_value2(this)" type="tel" placeholder="请输入您的电话号码" maxlength="11"></div>
        </div>
        <form>
        {volist name="$question" id="vo"}
        <div class="index_top1">
            <div class="index_top1_title clear">
                <div class="index_top2_title_left clear"><div class="index_top1_title_left1">{:sprintf("%02d", $key+4)}</div><div class="index_top1_title_left2">{$vo.title}</div></div>
            </div>
            <div class="index_top2_sel">
                {volist name="$vo.QuestionItem" id="vo2"}
                <div class="index_top2_sel1 clear">
                    <div class="index_top2_sel_img"><img src="__MOBILE__/img/a2.png"><img
                        src="__MOBILE__/img/a3.png"><input type="radio" name="question_id[{$vo2.id}]" value="{$vo2.letters}" /></div>
                    <div class="index_top2_sel_text">{$vo2.title}</div>
                </div>
                {/volist}
            </div>
        </div>
        {/volist}
    </form>
    <div class="index_top3">
        <div class="index_top3_text">{:cache('web_index')}</div>
        <div class="index_top3_line"><img src="__MOBILE__/img/a4.png" width="100%" height="100%"></div>

        {volist name="goods" id="vg"}
        <div package_id="100000" type_id="100000" goods_id="{$vg.id}" class="index_top3_all clear">
            <div class="index_top3_all_left"><img src="{$vg.single_pic}"></div>
            <div class="index_top3_all_right">
                <div class="index_top3_all_right1">{$vg.title}</div>
                <div class="index_top3_all_right2">¥ <span>{$vg.price}</span></div>
                <div class="index_top3_all_right3 clear">
                    <div class="index_top3_all_right3a">合计: ¥<span>0</span></div>
                    <div class="index_top3_all_right3b clear">
                        <div class="index_top3_all_right3b1"><img src="__MOBILE__/img/a6.jpg"></div>
                        <div class="index_top3_all_right3b2"><input type="text" disabled="true" value="0"></div>
                        <div class="index_top3_all_right3b3"><img src="__MOBILE__/img/a7.png"></div>
                    </div>
                </div>
            </div>
        </div>
        {/volist}
        {volist name="$data" id="vo"}
        <div package_id="{$vo.id}" type_id="{$vo.type_id}" limit_count="{$vo.limit_count}" title="{$vo.title}" price="{$vo.price}" class="index_top3_all clear">
            <div class="clear">
                <div class="index_top3_all_left"><img src="{$vo.single_pic}"></div>
                <div class="index_top3_all_right">
                    <div class="index_top3_all_right1">
                        {$vo.title}
                        {if $vo.type_id == 1}
                        (固定套餐)
                        {elseif $vo.type_id == 2}
                        (自选套餐)
                        {else/}
                        (独立商品)
                        {/if}
                    </div>
                    <div class="index_top3_all_right2">¥ <span>{$vo.price}</span></div>
                    <div class="index_top3_all_right3 clear">
                        <div class="index_top3_all_right3a">合计: ¥<span>0</span></div>
                        <div class="index_top3_all_right3b clear">
                            <div class="index_top3_all_right3b1"><img src="__MOBILE__/img/a6.jpg"></div>
                            <div class="index_top3_all_right3b2"><input type="text" disabled="true" value="0"></div>
                            <div class="index_top3_all_right3b3"><img src="__MOBILE__/img/a7.png"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="index_top3_all_more">
                <div class="index_top3_all_more_line"><div class="index_top3_all_more_line1">套餐详情</div><div class="index_top3_all_more_line2"><hr/></div></div>
                {volist name="$vo.goods" id="vo2"}
                {if $vo.type_id == 1}
                <div goods_package_id="{$vo2.id}" goods_title="{$vo2.title}" goods_number="0" class="goods index_top3_all_more_all">
                    <div class="index_top3_all_more_all_left"><img src="{$vo2.single_pic}" width="100%" height="100%"></div>
                    <div class="index_top3_all_more_all_right">
                        <div class="index_top3_all_more_all_right1">
                            <div class="index_top3_all_more_all_right1a">
                                {:strLength($vo2.title,12)}

                            </div>
                            <div class="index_top3_all_more_all_right1b">×<span>1</span></div>
                        </div>
                        <div class="index_top3_all_more_all_right2">¥{$vo2.price}</div>
                    </div>
                </div>
                {else/}
                <div goods_package_id="{$vo2.id}" limit_count="{$vo.limit_count}" goods_number="0" class="goods index_top3_all_more">
                    <div class="index_top3_all_more_all">
                        <div class="index_top3_all_more_all_left"><img src="{$vo2.single_pic}" width="100%" height="100%"></div>
                        <div class="index_top3_all_more_all_right">
                            <div class="index_top3_all_more_all_right1">
                                <div class="index_top3_all_more_all_right1a">{:strLength($vo2.title,12)}</div>
                                <div class="index_top3_all_right3b clear" style="margin-top: 1.1rem;">
                                    <div class="index_top3_all_zxipt1"><img src="__MOBILE__/img/a6.jpg"></div>
                                    <div class="index_top3_all_zxipt2"><input type="text" disabled="true" value="0"></div>
                                    <div class="index_top3_all_zxipt3"><img src="__MOBILE__/img/a7.png"></div>
                                </div>
                            </div>
                            <div class="index_top3_all_more_all_right2">¥<span>99</span></div>
                        </div>
                    </div>
                </div>
                {/if}
                {/volist}
            </div>
            <div class="index_top3_all_btn">点击查看套餐详情</div>
        </div>
        {/volist}

    </div>
    <div class="show1"></div>
    <div class="show2">
        <div class="show2_exit"><img src="__MOBILE__/img/a12.png" width="100%" height="100%"></div>
        <div class="show2_all">
            <div class="show2_title">请选择取货类型</div>
            <div class="show2_sel">
                <select name="" id="" class="show2_sel_op">
                    <option>现场自提</option>
                </select>
                <div class="show2_sel_img"><img src="__MOBILE__/img/a13.png" width="100%" height="100%"/></div>
            </div>
            <div class="show2_btn">点击确定</div>
        </div>
        
    </div>
    <a href=""><div class="show3">
        <div class="show3_img"><img src="__MOBILE__/img/a14.png" width="100%" height="100%"></div>
        <div class="show3_text">点击选择微信支付</div>

    </div></a>
    <div class="bottom clear">
        <div class="bottom_btn">立即结算</div>
        <div class="bottom_total clear"><div class="bottom_total1">合计</div><div class="bottom_total2">¥<span>0</span></div></div>
        <div class="bottom_num">共<span>0</span>件</div>
    </div>
    <div class="foot_back"></div>
{include file="public/foot"}
    <script>
        $(function(){
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            time1(year,month,day)
            $('.time1').change(function(){
                //console.log($(this).val())
                $('.time1').parent().next().html($(this).val())
            })
            $('.index_top2_sel1').click(function(){
                // console.log($(this).find('.index_top2_sel_img input').prop('checked'))
                if(!$(this).find('.index_top2_sel_img input').prop('checked')){
                    $(this).parent().find('.index_top2_sel_img input').prop('checked',false)
                    $(this).parent().find('.index_top2_sel1').removeClass('on1')
                    $(this).find('.index_top2_sel_img input').prop('checked',true)
                    $(this).addClass('on1')
                }
            })
            $('.index_top3_all_right3b1').click(function(){
                var num = $(this).parent().find('.index_top3_all_right3b2 input').val()
                var price = $(this).parent().parent().parent().find('.index_top3_all_right2 span').html()
                console.log(price)
                if(num == 0){
                    var num = 0
                }else{
                    var num = parseInt(num) - 1
                }
                var total = num * parseInt(price)
                $(this).parent().find('.index_top3_all_right3b2 input').val(num)
                $(this).parent().parent().find('.index_top3_all_right3a span').html(total);
                var allnum = 0
                var alltotal = 0
                for(var i=0;i<$('.index_top3_all_right3b2 input').length;i++){
                    var allnum1 = $('.index_top3_all_right3b2 input').eq(i).val()
                    var alltotal1 = $('.index_top3_all_right3a span').eq(i).html()
                    var allnum = parseInt(allnum) + parseInt(allnum1)
                    var alltotal = parseInt(alltotal1) + parseInt(alltotal)
                }
                $('.bottom_num span').html(parseInt(allnum))
                $('.bottom_total2 span').html(alltotal)
            })
                $('.index_top3_all_right3b3').click(function(){
                    var num = $(this).parent().find('.index_top3_all_right3b2 input').val()
                    var price = $(this).parent().parent().parent().find('.index_top3_all_right2 span').html()
                    var num = parseInt(num) + 1
                    var total = num * parseInt(price)
                    $(this).parent().find('.index_top3_all_right3b2 input').val(num)
                    $(this).parent().parent().find('.index_top3_all_right3a span').html(total)
                    var allnum = 0
                    var alltotal = 0
                    for(var i=0;i<$('.index_top3_all_right3b2 input').length;i++){
                    var allnum1 = $('.index_top3_all_right3b2 input').eq(i).val()
                    var alltotal1 = $('.index_top3_all_right3a span').eq(i).html()
                    var allnum = parseInt(allnum) + parseInt(allnum1)
                    var alltotal = parseInt(alltotal1) + parseInt(alltotal)
                    }
                    $('.bottom_num span').html(parseInt(allnum))
                    $('.bottom_total2 span').html(parseInt(alltotal))
            })
            $('.index_top3_all_btn').click(function(){
                if($(this).parent().find('.index_top3_all_more').css('display')!='none'){
                    $(this).parent().find('.index_top3_all_more').css('display','none')
                    $(this).removeClass('on2')
                    $(this).html('点击查看套餐详情')
                }else{
                    $(this).parent().find('.index_top3_all_more').css('display','block')
                    $(this).addClass('on2')
                    $(this).html('点击收起该套餐商品')
                }
            })
            var arr1 = [];
            $('.index_top3_all_zxipt1').click(function(){
                var num = $(this).parent().find('.index_top3_all_zxipt2 input').val()
                var price = $(this).parent().parent().parent().find('.index_top3_all_more_all_right2 span').html()
                console.log(price)
                if(num == 0){
                    var num = 0
                }else{
                    var num = parseInt(num) - 1
                }
                var total = num * parseInt(price)
                $(this).parent().find('.index_top3_all_zxipt2 input').val(num)
                arr1.push(total)
                var allnum = 0
                var alltotal = 0
                for(var i=0;i<$('.index_top3_all_zxipt2 input').length;i++){
                    var allnum1 = $('.index_top3_all_zxipt2 input').eq(i).val()
                    var allnum = parseInt(allnum) + parseInt(allnum1)
                }
                for(var j=0;j<$('.index_top3_all_zxipt2 input').length;j++){
                    var alltotal1 =  $('.index_top3_all_zxipt2 input').eq(j).val() * $('.index_top3_all_more_all_right2 span').eq(j).html()
                    var alltotal = alltotal1 + alltotal
                }
                $(this).parent().parent().parent().parent().parent().parent().find('.index_top3_all_right2 span').html(alltotal)
            })
            $('.index_top3_all_zxipt3').click(function(){
                var num = $(this).parent().find('.index_top3_all_zxipt2 input').val()
                var price = $(this).parent().parent().parent().find('.index_top3_all_more_all_right2 span').html()
                console.log(price)
                var num =  parseInt(num) + 1
                var total = num * parseInt(price)
                $(this).parent().find('.index_top3_all_zxipt2 input').val(num)
                var allnum = 0
                var alltotal = 0
                for(var i=0;i<$('.index_top3_all_zxipt2 input').length;i++){
                    var allnum1 = $('.index_top3_all_zxipt2 input').eq(i).val()
                    var allnum = parseInt(allnum) + parseInt(allnum1)
                }
                for(var j=0;j<$('.index_top3_all_zxipt2 input').length;j++){
                    var alltotal1 =  $('.index_top3_all_zxipt2 input').eq(j).val() * $('.index_top3_all_more_all_right2 span').eq(j).html()
                    var alltotal = alltotal1 + alltotal
                }
                $(this).parent().parent().parent().parent().parent().parent().find('.index_top3_all_right2 span').html(alltotal)
            })
            /**
             * 立即计算
             */
            $('.bottom_btn').click(function(){

                var name= $('[name=name]').val();
                var mobile= $('[name=mobile]').val();
                if(!name){
                    layer.msg('请输入姓名');return;
                }
                if(!mobile){
                    layer.msg('请输入手机号');return;
                }

                // $('.show1').css('display','block')
                // $('.show2').css('display','block')
                var package_ids = [];
                var package_numbers = 0;
                var ids_numbers = [];
                $('.index_top3_all').each(function (k,v) {
                    var data = {};
                    var package_id = $(this).attr('package_id');
                    var type_id = $(this).attr('type_id');
                    var package_number = $(this).find('.index_top3_all_right3b2 input').val();
                    var limit_number = $(this).attr('limit_count')*package_number;

                    if(package_number > 0 ){ //套餐数量
                        data.package_id= package_id;
                        data.type_id= type_id;
                        data.package_number= package_number;
                        ids_numbers.push(data);

                        if(data.type_id == 2){ //如果是自由组合套餐 判断商品数量是否匹配并上传给后台
                            var goods_list = [];
                            var goods_count = 0;
                            $(this).find('.goods').each(function (k,v) {
                              var ids_numbers = [];
                              var goods_data = {};
                              var goods_number = $(this).find('input').val();
                              if(goods_number > 0){
                                  goods_count += parseInt(goods_number);
                                  goods_data.goods_package_id = $(this).attr('goods_package_id');
                                  goods_data.goods_number = goods_number;
                                  goods_list.push(goods_data);
                              }
                            });
                            goods_count = parseInt(goods_count);
                            if(goods_count == 0){
                                layer.msg('请选择自选商品');return;
                            }
                            console.log(limit_number);
                            console.log(goods_count);
                            if(limit_number != goods_count){
                                layer.msg('自选套餐商品数量不匹配,选择总数量应为:'+limit_number);return;
                            }
                            data.goods =goods_list;
                        }

                        if(data.type_id == 100000){
                            var goods_data = {};
                            var goods_number = $(this).find('input').val();
                            var goods_id = $(this).attr('goods_id');
                            goods_data.goods_number = goods_number;
                            goods_data.goods_id = goods_id;
                            data.goods = goods_data;
                        }
                        // package_numbers.push(number);
                    }
                    ++package_numbers;
                });
                if(package_numbers == 0){
                    layer.msg('请至少选择一个套餐');return;
                }


               JSON.stringify(ids_numbers);
                if(ids_numbers.length == 0){
                    //layer.msg('请至少选择一件套餐或者一件商品');return;
                }
                var data = $('form').serializeArray();
                // data.push({'name':'name','value':name});
                // data.push({'name':'mobile','value':mobile});
                $.ajax({
                    type: "POST", //用POST方式传输
                    dataType: "json", //数据格式:JSON
                    url: "{:url('Order/create')}", //目标地址
                    async: false,
                    traditional :false,
                    data:{data:ids_numbers,name:name,mobile:mobile,question:data},
                    success: function (ret) {
                        console.log(ret);

                        if(ret.code == 200){
                            window.location.href = "{:url('Wechat/unifiedorder')}?order_number="+ret.data.order_number;
                        }else if(ret.code == 201){
                            layer.msg('答题完成');
                            setTimeout(function () {
                                window.location.href = '/';
                            },5000);
                        }else{
                            layer.msg(ret.message);
                        }
                    }
                });

                //
                // $.ajax({
                //     type: "POST", //用POST方式传输
                //     dataType: "json", //数据格式:JSON
                //     url: "{:url('question')}", //目标地址
                //     async: false,
                //     traditional :false,
                //     data:data,
                //     success: function (ret) {
                //         console.log(ret);
                //         return;
                //     }
                // });

            })
            $('.show2_exit').click(function(){
                $('.show1').css('display','none')
                $('.show2').css('display','none')
            })
            $('.show2_btn').click(function(){
                $('.show2').css('display','none')
                $('.bottom').css('z-index','15')
                $('.foot').css('z-index','15')
                $('.show3').css('display','block')
                $('.bottom_btn').addClass('on3')
            })
            $('.show3').click(function(){
                $('.bottom_btn').removeClass('on3')
                $('.show1').css('display','none')
                $('.show3').css('display','none')
                $('.bottom').css('z-index','10')
                $('.foot').css('z-index','10')
            })
            function time1(a3,a1,a2) {
                if(a1<10&&a2<10){
                    $('.time1').parent().next().html(a3+'-0'+a1+'-0'+a2);
                }else if(a1>9&&a2<10){
                    $('.time1').parent().next().html(a3+'-'+a1+'-0'+a2);
                }else if(a1<10&&a2>9){
                    $('.time1').parent().next().html(a3+'-0'+a1+'-'+a2);
                }else{
                    $('.time1').parent().next().html(a3+'-'+a1+'-'+a2);
                }
            }
        })
    </script>
</body>
</html>
<script>

    var name = localStorage.getItem('name');
    var mobile = localStorage.getItem('mobile');
    if(name == 'null') name = '';
    $('[name=name]').val(name);
    $('[name=mobile]').val(mobile);
    function set_value(t) {
        var v = $(t).val();
        console.log(v);
        localStorage.setItem('name', v);
    }

    function set_value2(t) {

        var v = $(t).val();
        console.log(v);
        localStorage.setItem('mobile', v);
    }
</script>